<template>
  <view>
    <!-- 饮食习惯 -->
    <view class="mb-6">
      <view class="text-lg font-bold mb-4 text-gray-800">饮食习惯</view>
      
      <!-- 饮食情况 -->
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.diet_habits.diet"
          :show-title="true"
          title-label="饮食情况"
          title-placeholder="请输入饮食情况"
          description-label="详细描述"
          description-placeholder="请描述您的饮食情况"
          :description-rows="2"
          border-color="border-green-300"
        />
      </view>

      <!-- 偏好食物 -->
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.diet_habits.preferred_foods"
          :show-title="true"
          title-label="偏好食物"
          title-placeholder="请输入偏好食物"
          description-label="详细描述"
          description-placeholder="请描述您偏好的食物类型"
          :description-rows="2"
          border-color="border-green-300"
        />
      </view>

      <!-- 营养摄入 -->
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.diet_habits.nutrition.nutrition_intake"
          :show-title="true"
          title-label="营养摄入"
          title-placeholder="请输入营养摄入情况"
          description-label="详细描述"
          description-placeholder="请描述营养摄入情况"
          :description-rows="2"
          border-color="border-green-300"
        />
      </view>
    </view>

    <!-- 运动习惯 -->
    <view class="mb-6">
      <view class="text-lg font-bold mb-4 text-gray-800">运动习惯</view>
      
      <!-- 运动情况 -->
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.exercise_habits.exercise"
          :show-title="true"
          title-label="运动情况"
          title-placeholder="请输入运动情况"
          description-label="详细描述"
          description-placeholder="请描述您的运动情况"
          :description-rows="2"
          border-color="border-blue-300"
        />
      </view>

      <!-- 运动频率 -->
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.exercise_habits.exercise_frequency"
          :show-title="true"
          title-label="运动频率"
          title-placeholder="请输入运动频率"
          description-label="详细描述"
          description-placeholder="请描述运动频率（如每周3次）"
          :description-rows="2"
          border-color="border-blue-300"
        />
      </view>

      <!-- 运动方式 -->
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.exercise_habits.exercise_methods"
          :show-title="true"
          title-label="运动方式"
          title-placeholder="请输入运动方式"
          description-label="详细描述"
          description-placeholder="请描述运动方式（如跑步、游泳等）"
          :description-rows="2"
          border-color="border-blue-300"
        />
      </view>
    </view>

    <!-- 吸烟情况 -->
    <view class="mb-6">
      <view class="text-lg font-bold mb-4 text-gray-800">吸烟情况</view>
      
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.smoking_situation.smoking_habits"
          :show-title="true"
          title-label="吸烟习惯"
          title-placeholder="请输入吸烟习惯"
          description-label="详细描述"
          description-placeholder="请描述吸烟习惯（如不吸烟、每天1包等）"
          :description-rows="2"
          border-color="border-red-300"
        />
      </view>
    </view>

    <!-- 饮酒情况 -->
    <view class="mb-6">
      <view class="text-lg font-bold mb-4 text-gray-800">饮酒情况</view>
      
      <view class="mb-4">
        <ItemWithImagesCard
          v-model="lifestyleData.drinking_situation.drinking_habits"
          :show-title="true"
          title-label="饮酒习惯"
          title-placeholder="请输入饮酒习惯"
          description-label="详细描述"
          description-placeholder="请描述饮酒习惯（如不饮酒、偶尔饮酒等）"
          :description-rows="2"
          border-color="border-yellow-300"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

/**
 * 生活方式数据结构
 */
interface LifestyleHabits {
  diet_habits: {
    diet: any
    preferred_foods: any
    nutrition: {
      nutrition_intake: any
    }
  }
  exercise_habits: {
    exercise: any
    exercise_frequency: any
    exercise_methods: any
  }
  smoking_situation: {
    smoking_habits: any
  }
  drinking_situation: {
    drinking_habits: any
  }
}

interface Props {
  modelValue?: LifestyleHabits
}

interface Emits {
  (e: 'update:modelValue', value: LifestyleHabits): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({
    diet_habits: {
      diet: { title: '', description: '', images: [] },
      preferred_foods: { title: '', description: '', images: [] },
      nutrition: {
        nutrition_intake: { title: '', description: '', images: [] }
      }
    },
    exercise_habits: {
      exercise: { title: '', description: '', images: [] },
      exercise_frequency: { title: '', description: '', images: [] },
      exercise_methods: { title: '', description: '', images: [] }
    },
    smoking_situation: {
      smoking_habits: { title: '', description: '', images: [] }
    },
    drinking_situation: {
      drinking_habits: { title: '', description: '', images: [] }
    }
  })
})

const emit = defineEmits<Emits>()

// 使用响应式数据
const lifestyleData = reactive<LifestyleHabits>(props.modelValue)
</script>

<style scoped lang="scss">
// 样式已使用 UnoCSS 类名定义
</style>
